<template>
  <div class="flex flex-col h-100">
    <div v-if="props.list.length" class="goods-items">
      <template v-for="(item, i) in props.list" :key="item.id">
        <!-- 带图商品 -->
        <div
          @click="clickGoods(item, i)"
          v-if="!props.inputActive"
          class="item flex items-center"
          style="width: calc(33.33333% - 10rpx)"
        >
          <div style="width: 70rpx" class="m-r-10">
            <w-image
              mode="aspectFill"
              :src="item.image"
              width="70rpx"
              height="70rpx"
              radius="4rpx"
            />
          </div>
          <div class="flex-1 w-0">
            <div class="goods-name m-b-4 u-line-2" style="height: 48rpx">
              {{ item.productName }}
            </div>
            <div class="price-unit">
              <div class="price">{{ (item.retailPrice || 0).toFixed(2) }}</div>
              <div class="unit">&nbsp;/&nbsp;{{ item.unitName }}</div>
            </div>
          </div>
        </div>
        <div
          v-else
          @click="emit('clickGood', item, i)"
          class="item"
          style="width: calc(25% - 10rpx)"
        >
          <div class="goods-name m-b-4 u-line-2" style="height: 48rpx">
            {{ item.productName }}
          </div>
          <div class="price-unit">
            <div class="price">{{ item.retailPrice.toFixed(2) }}</div>
            <div class="unit">&nbsp;/&nbsp;{{ item.unitName }}</div>
          </div>
        </div>
      </template>
    </div>

    <div v-else class="flex-1 h-0 flex flex-col items-center justify-center">
      <image mode="widthFix" style="width: 120rpx" :src="emty_img" />

      <div
        v-if="!props.inputActive"
        class="font-size-16 font-weight-700 m-b-10"
      >
        暂无商品
      </div>
      <div class="font-size-14 color-3">
        <template v-if="!props.inputActive">
          请前往 [ 后台管理 - 销售面板设置 ] 中配置
        </template>
        <template v-else>
          <template v-if="props.searchValue">
            未搜索到商品结果，请重新搜索
          </template>
          <template v-else>
            请在上方输入
            <span class="color-1">
              商品编码 / 商品条码 / PLU码 / 商品首字母拼音
            </span>
            查询商品
          </template>
        </template>
      </div>
    </div>
  </div>

  <div v-if="showPopup" class="popup-box">
    <div class="popup-content">
      <div class="flex items-center justify-between">
        <div class="goods-name font-size-24 font-weight-700 color-1">
          薛记炒栗子
        </div>
        <div
          @click="clickCancel"
          class="iconfont icon-guanbi font-size-22 p-x-10"
        ></div>
      </div>
      <div class="m-t-10 color-3 font-size-18">单价：￥2.00</div>
      <div class="m-t-20 font-size-18 color-1">计量单位</div>
      <div class="unit-list m-t-18">
        <div class="unit active">称重</div>
        <div class="unit">包(1*6)</div>
      </div>
      <div class="m-t-20 font-size-18 color-1">计量单位</div>
      <div class="unit-list m-t-18">
        <div class="unit active">称重</div>
        <div class="unit">包(1*6)</div>
      </div>
      <div class="flex items-center justify-between m-t-60">
        <div class="diy-number-box m-x-10">
          <up-number-box
            :integer="false"
            :min="0.001"
            :decimalLength="3"
            inputWidth="60rpx"
            button-size="36"
            buttonWidth="36rpx"
            buttonHeight="36rpx"
            inputBgColor="#fff"
            iconStyle="color: #fff"
          ></up-number-box>
        </div>
        <div class="total-bt flex items-center justify-end gap-30">
          <div class="total color-price">
            <span class="font-size-24 font-weight-700">￥</span
            ><span class="font-size-32 font-weigth-500">2.00</span>
          </div>
          <div @click="clickAddCart" class="bt">加入购物车</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import emty_img from "@/static/images/search-goods-emty.png";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  // input是否被激活
  inputActive: {
    type: Boolean,
    default: false,
  },
  searchValue: {
    type: String,
    default: "",
  },
});
const showPopup = ref(false);
const emit = defineEmits("clickGood", "clickAddCart");

function clickGoods(item, i) {
  // showPopup.value = true;
  // console.log(item, i);
  emit("clickGood", item, i);
}
function clickCancel() {
  showPopup.value = false;
}
function clickAddCart(item) {
  showPopup.value = false;
  emit("clickAddCart", item);
}
</script>

<style lang="scss" scoped>
.goods-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  .item {
    background: $uni-text-color-inverse;
    border-radius: 5rpx;
    padding: 10rpx;

    height: 94rpx;
    border: 1px solid $uni-border-color-1;
    font-size: 16rpx;
    line-height: 24rpx;

    .price-unit {
      display: flex;
      align-items: center;
      .price {
        color: $uni-text-color-price;
        font-weight: 700;
      }
    }
  }
}
.diy-number-box {
  border-radius: 4rpx;
  overflow: hidden;
  ::v-deep {
    .u-number-box__input {
      margin: 0;
      // color: #;
    }
    .cursor-pointer {
      color: #fff !important;
      font-weight: 700 !important;
      background: $uni-color-primary !important;
    }
    .u-number-box__minus--disabled {
      opacity: 0.5;
    }
  }
}
.popup-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.3);
  // backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 700rpx;
    // min-height: 360rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 20rpx 30rpx;
    line-height: 1.5;

    .unit-list {
      display: flex;
      gap: 20rpx;
      .unit {
        min-width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        padding: 0 10rpx;
        font-size: 18rpx;
        text-align: center;
        border-radius: 8rpx;
        border: 1px solid $uni-border-color-1;
      }
      .active {
        color: $uni-color-primary;
        border: 1px solid $uni-color-primary;
        background: rgba($color: $uni-color-primary, $alpha: 0.3);
      }
    }

    .total-bt {
      .bt {
        width: 140px;
        height: 50px;
        line-height: 50rpx;
        text-align: center;
        border-radius: 8rpx;
        background: $uni-color-primary;
        color: $uni-text-color-inverse;
      }
    }
  }
}
</style>
